<!DOCTYPE html>
<html>
<head>
    <title>键盘事件的处理</title>
    <style>

    </style>
</head>
<body>
    <a href="https://nmixx.jype.com/">这是一个受默认行为控制的元素</a>

    <input type="text" id="username"> 

    <input type="text" id="password">

    <input type="text" id="testpress">

    <input type="text" id="message">

    <script>
        // 三种事件keydown,keypress,keyup
        // 首先是keydown,它可以利用无值的键触发
        var username = document.getElementById("username");
        username.onkeydown = function(e)
        {
            // 这里value的属性就是输入框的数据
            console.log(e.target.value); 
            return 0;
        }


        // 由于onkeydown是检测键按下时的事件
        // 因此如果想要获取数据，应该使用onkeyup
        var password = document.getElementById("password");
        password.onkeyup = function(e)
        {
            console.log(e.target.value);
            return 0;// 但是他不是会一直输出吗
            // 所以我为什么不用form表单
        }
        // 

        // onkeypress用于键没有值的时候
        var testpress = document.getElementById("testpress");
        testpress.onkeypress = function(e)
        {
            console.log(e.target.value);
        }


        // 使用keyCode==13来检测回车
        var message = document.getElementById("message");
        message.onkeydown = function(e)
        {
            if (e.keyCode==13)
            {
                console.log("现在"+e.target.value+"要登录");
            }
        }
    </script>
</body>
</html>